<template>
	<div class="system-coupon-container standard-container layout-padding layout-pd">
		<div style="height: 100px">
			<el-row :gutter="15">
				<el-col :span="6">
					<div class="card">
						<div>
							<div class="num">{{ state.quantity.totalQuantity }}</div>
						</div>
						<div class="flex flex-between">
							<div class="name">总发券量/张</div>
							<div class="cursor-pointer">
								<el-tooltip effect="light" content="用户领取的优惠券的总张数，包含已经被后台删除的优惠券" placement="bottom-start">
									<SvgIcon name="ele-Position"></SvgIcon>
								</el-tooltip>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="card">
						<div>
							<div class="num">{{ state.quantity.collectQuantity }}</div>
						</div>
						<div class="flex flex-between">
							<div class="name">已领取/张</div>
							<div class="cursor-pointer">
								<el-tooltip effect="light" content="用户已领取的并且已经超过可使用日期的未使用优惠券" placement="bottom-start">
									<SvgIcon name="ele-Position"></SvgIcon>
								</el-tooltip>
							</div>
						</div></div
				></el-col>
				<el-col :span="6">
					<div class="card">
						<div>
							<div class="num">{{ state.quantity.usedQuantity }}</div>
						</div>
						<div class="flex flex-between">
							<div class="name">已使用/张</div>
							<div class="cursor-pointer">
								<el-tooltip effect="light" content="用户已领取并且已使用的优惠券" placement="bottom-start">
									<SvgIcon name="ele-Position"></SvgIcon>
								</el-tooltip>
							</div>
						</div></div
				></el-col>
				<el-col :span="6">
					<div class="card">
						<div>
							<div class="num">{{ state.quantity.usageRate }}%</div>
						</div>
						<div class="flex flex-between">
							<div class="name">使用率</div>
							<div class="cursor-pointer">
								<el-tooltip effect="light" content="用户已使用优惠和总发券量的比例" placement="bottom-start">
									<SvgIcon name="ele-Position"></SvgIcon>
								</el-tooltip>
							</div>
						</div></div
				></el-col>
			</el-row>
		</div>
		<div class="review-list-title">
			<div class="title-actions">
				<el-button size="default" type="primary" class="ml10" @click="getTableData">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button size="default" type="primary" class="ml10" @click="onOpen('add', '')">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增优惠券
				</el-button>
				<!-- <el-row :gutter="10">
					<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
						<el-form-item label="活动名称:">
							<el-input v-model="state.search.name" size="default" clearable placeholder="请输入活动名称" style="width: 100%"> </el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" v-show="state.isToggle">
						<el-form-item label="创建时间:">
							<el-date-picker
								type="datetimerange"
								v-model="state.search.searchDateTime"
								start-placeholder="创建开始时间"
								end-placeholder="创建时间"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
						<el-form-item class="table-form-btn" label-width="10px">
							<div class="table-form-btn-toggle ml10 cursor-pointer" @click="state.isToggle = !state.isToggle">
								<span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
								<SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
							</div>
							<el-button size="default" type="primary" class="ml10" @click="getTableData">
								<el-icon>
									<ele-Search />
								</el-icon>
								查询
							</el-button>
							<el-button size="default" type="primary" class="ml10" @click="onOpen('add', '')">
								<el-icon>
									<ele-FolderAdd />
								</el-icon>
								新增优惠券
							</el-button>
						</el-form-item>
					</el-col>
				</el-row> -->
			</div>
		</div>

		<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
			<el-table-column prop="couponName" label="优惠券名称" width="150"></el-table-column>
			<el-table-column prop="couponType" label="类型" width="100">
				<template #default="scope">
					<el-tag v-if="scope.row.couponType == 0">满减券</el-tag>
					<el-tag v-else>折扣券</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="rangeType" label="可用范围" width="150">
				<template #default="scope">
					<el-tag v-if="scope.row.rangeType == 0">全场通用</el-tag>
					<el-tag v-else-if="scope.row.rangeType == 1">指定商品可用</el-tag>
					<el-tag v-else-if="scope.row.rangeType == 2">指定商品不可用</el-tag>
					<el-tag v-else>指定分类</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="discountContentView" label="优惠内容" width="300"></el-table-column>
			<el-table-column prop="useStatus" label="领券状态" width="100"> </el-table-column>
			<el-table-column prop="totalQuantity" label="发卷总数" width="100"></el-table-column>
			<el-table-column prop="hasCollectCount" label="已领取" width="100"></el-table-column>
			<el-table-column prop="hasUseCount" label="已使用" width="100"></el-table-column>

			<el-table-column label="剩余" width="100">
				<template #default="scope">
					{{ scope.row.totalQuantity - scope.row.hasCollectCount }}
				</template>
			</el-table-column>
			<el-table-column prop="userCollectTimes" label="可领券次数" width="150"> </el-table-column>
			<el-table-column prop="couponValidPeriodContent" label="优惠券有效期" width="150"> </el-table-column>
			<el-table-column prop="couponStatus" label="状态" width="120">
				<template #default="scope">
					<el-tag v-if="scope.row.couponStatus == 0">公开发放</el-tag>
					<el-tag v-else-if="scope.row.couponStatus == 1">后台发放</el-tag>
					<el-tag v-else-if="scope.row.couponStatus == 2">禁止使用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="updateTime" label="修改时间"></el-table-column>
			<el-table-column prop="updateUsername" label="操作人"></el-table-column>
			<el-table-column label="操作" width="200" fixed="right">
				<template #default="scope">
					<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpen('edit', scope.row.id)"
						>修改</el-button
					>
					<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
					<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)"
						>领取记录</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-container">
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:page-sizes="[10, 15, 20, 30, 50, 100]"
				v-model:current-page="state.tableData.paging.currentPage"
				background
				v-model:page-size="state.tableData.paging.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.paging.totalCount"
			>
			</el-pagination>
		</div>

		<CouponDialog ref="CouponRef" @refresh="onRefresh"></CouponDialog>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { CouponApi } from '/@/api/shop/coupon/index';
import { ElMessageBox, ElMessage } from 'element-plus';
import messageUtils from '/@/utils/messageUtils';
import { stat } from 'fs';
const CouponDialog = defineAsyncComponent(() => import('./dialog.vue'));

const CouponRef = ref();

const state = reactive({
	isToggle: false,
	search: {
		name: '',
		searchDateTime: '',
	},
	quantity: {
		totalQuantity: 0,
		collectQuantity: 0,
		usedQuantity: 0,
		usageRate: '0.00',
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		paging: {
			currentPage: 1,
			pageSize: 15,
			totalCount: 0,
			totalPages: 0,
		},
	},
});

const onOpen = (flag: string, id: string) => {
	CouponRef.value.openDialog(flag, id);
};

const onRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除优惠券名称：“${row.couponName}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await CouponApi().delete(row.id);
			getTableData();
			ElMessage.success('删除成功');
		})
		.catch(() => {
			messageUtils.error('删除成功,请重试');
		});
};

const onRefresh = () => {
	onHandleCurrentChange(1);
};

// 分页改变
const onHandleSizeChange = (pageSize: number) => {
	state.tableData.paging.pageSize = pageSize;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (currentPage: number) => {
	state.tableData.paging.currentPage = currentPage;
	getTableData();
};

const getTableData = async () => {
	const { data } = await CouponApi().search({
		couponName: state.search.name,
		startTime: resolveStartTime(state.search.searchDateTime),
		endTime: resolveEndTime(state.search.searchDateTime),
		offset: (state.tableData.paging.currentPage - 1) * state.tableData.paging.pageSize,
		limit: state.tableData.paging.pageSize,
	});
	state.tableData.data = data.datas;
	state.tableData.paging.currentPage = data.paging.currentPage;
	state.tableData.paging.totalCount = data.paging.totalCount;
	console.log('data: ', data);
};

const resolveStartTime = (searchDateTime: any) => {
	if (state.search.searchDateTime) {
		return state.search.searchDateTime[0].getTime();
	}
};

const resolveEndTime = (searchDateTime: any) => {
	if (state.search.searchDateTime) {
		return state.search.searchDateTime[1].getTime();
	}
};

const quantity = async () => {
	const { data } = await CouponApi().quantity();
	console.log('data: ', data);
	state.quantity = data;
};

onMounted(() => {
	getTableData();
	quantity();
});
</script>

<style scoped lang="scss">
.table-form-btn-toggle {
	white-space: nowrap;
	user-select: none;
	display: flex;
	align-items: center;
	color: var(--el-color-primary);
}

.pandect {
	background-color: white;
	width: 99.5%;
}

.card {
	height: 80px;
	background: #fdfdfd;
	border: 1px solid #f3f3f3;
	box-shadow: 0 2px 6px #8c8c8c1f;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}

.num {
	font-weight: 400;
	font-size: 24px;
	line-height: 26px;
	color: #434343;
}

.name {
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	color: #595959;
}

.search {
	background-color: white;
	padding: 0 16px;
}

.system-coupon-container {
	.el-table {
		flex: 1;
	}
}
</style>
